@charset 'utf-8';
html,body,div,span,input{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
html,body{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;font-family:"Microsoft YaHei",arial,courier new,courier,"\5b8b\4f53",monospace;}
.root{position:absolute;top:0;right:0;bottom:0;left:0;background-color: #545454;}
.root .who{position:absolute;top:0;right:0;left:0;height:50px;line-height:50px;background-color: #545454;color: #fff;padding:0 10px;}
.root .who .tips{flaot:left;color:#f00;font-size:14px;}
.root .who .who-name{float:right;font-weight: bold;}
.root .enter{position:absolute;bottom:0;right:0;left:0;height:0;height:50px;}
.root .enter div{position:absolute;top:10px;right:70px;left:10px;height:30px;line-height:28px;border:1px solid #ddd;border-radius: 4px;overflow: hidden;}
.root .enter div input{height:28px;width:100%;padding:0 10px;float:left;}
.root .enter span{position:absolute;top:10px;right:10px;height:30px;line-height:30px;font-size:14px;width:50px;border:1px solid #ddd;float:right;text-align:center;cursor:pointer;color: #fff;border-radius: 15px;background-color: #b74848;}
.root .content{position:absolute;top:50px;right:0;bottom: 50px;left:0;overflow-y:auto;padding: 0 6px;}
.root .content .li{font-size:12px;background-color: #eee;border-bottom: 1px solid #ddd;}
.root .content .li .name-and-time{height:30px;line-height:30px;background-color:#eee;padding:0 6px;}
.root .content .li .name-and-time .name{float:left;color: #0099d6;}
.root .content .li .name-and-time .time{float:right;}
.root .content .li .msg{line-height:20px;padding:0 6px;color: #999;}
.root .mask{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0.7);}
.root .mask .panel{position:absolute;left:50%;top:50%;height:100px;width:90%;transform:translate3d(-50%,-50%,0);border:1px solid #ddd;}
.root .mask .panel .name{height:40px;line-height:40px;width:100%;}
.root .mask .panel .name input{height:100%;width:100%;padding:0 10px;float:left;}
.root .mask .panel .action{height:50px;width:100%;margin-top:8px;}
.root .mask .panel .action span{display:inline-block;width:50px;height:30px;line-height:30px;border:1px solid #ddd;margin:10px;text-align:center;font-weight:bold;float:right;cursor:pointer;}
.root .mask .panel .action .confirmMask{color:#f00;}
.root .mask .panel .action .closeMask{color:#fff;}